<template>
  <div class="line-echart">
    <BaseEchart :options="options"></BaseEchart>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps } from 'vue'
import BaseEchart from '@/base-ui/echart'

const props = defineProps<{
  title?: string
  xLabels: string[]
  values: any[]
}>()

const options = computed(() => {
  return {
    angleAxis: {
      max: 2,
      startAngle: 30,
      splitLine: {
        show: false
      }
    },
    radiusAxis: {
      type: 'category',
      data: props.xLabels,
      z: 10
    },
    polar: {},
    series: [
      {
        type: 'bar',
        data: props.values.slice(0, 5),
        coordinateSystem: 'polar',
        name: `${props.xLabels[1]}`,
        itemStyle: {
          borderColor: 'red',
          opacity: 0.8,
          borderWidth: 1
        }
      },
      {
        type: 'bar',
        data: props.values.slice(2, 6),
        coordinateSystem: 'polar',
        name: `${props.xLabels[2]}`,
        roundCap: true,
        itemStyle: {
          borderColor: 'green',
          opacity: 0.8,
          borderWidth: 1
        }
      }
    ],
    legend: {
      show: true,
      data: [`${props.xLabels[1]}`, `${props.xLabels[2]}`]
    }
  }
})
</script>
<style lang="less" scoped></style>
